<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Display a map on a webpage</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
  <style>
      html, body, .map {
          height: 100%;
          width: 100%;
          padding: 0;
          margin: 0;
          overflow: hidden;
      }
  </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var style = {
        "version": 8,
        "name": "Dark",
        "sources": {
            "XYZTile": {
                "type": "raster",
                "tiles": ['https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "XYZTile",
            "type": "raster",
            "source": "XYZTile",
            "minzoom": 0,
            "maxzoom": 17
        },{
            "id": "XYZTile1",
            "type": "raster",
            "source": "XYZTile",
            "minzoom": 0,
            "maxzoom": 17
        }
        ]
    };
    var map = new mapboxgl.Map({
        container: 'map',
        style: style,
        center: [103.572, 36.897],
        zoom: 3
    });
</script>

</body>
</html>